
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            </head>
    <title>%PRODUCT%</title>
    <style>
        body {
            margin: 0px;
            font-family: Courier, monospace;
            font-size: 0.8em;
        }
    table {
        width: 100%;
        border-collapse: collapse;
    }
    tr {
        vertical-align: top;
    }
    tr:nth-child(odd) {
        background-color: #eeeeee;
    }
    td {
        padding: 2px 10px;
    }
    #footer {
        text-align: center;
        margin: 20px 0px;
        color: darkgray;
    }
    .error {
        color: red;
        font-weight: bold;
    }
    </style><script type="text/javascript">
        var refreshDelay = 2000;
        var footerElement = null;
        function updateTimestamp() {
            var now = new Date();
            footerElement.innerHTML = "Last updated on " + now.toLocaleDateString() + " " + now.toLocaleTimeString();
        }
    function refresh() {
        var timeElement = document.getElementById("maxTime");
        var maxTime = timeElement.getAttribute("data-value");
        timeElement.parentNode.removeChild(timeElement);
        
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4) {
                if (xmlhttp.status == 200) {
                    var contentElement = document.getElementById("content");
                    contentElement.innerHTML = contentElement.innerHTML + xmlhttp.responseText;
                    updateTimestamp();
                    setTimeout(refresh, refreshDelay);
                } else {
                    footerElement.innerHTML = "<span class=\"error\">Connection failed! Reload page to try again.</span>";
                }
            }
        }
        xmlhttp.open("GET", "/logAfter?timestamp=" + maxTime, true);
        xmlhttp.send();
    }
    window.onload = function() {
        footerElement = document.getElementById("footer");
        updateTimestamp();
        setTimeout(refresh, refreshDelay);
    }
    </script>
    </head>
    <body>
        <table>
            <tbody id="content">%CONTENT%</tbody>
        </table>
        <div id="footer"></div>
        <p><a href="/download">Download log files</a></p>
        
    </body>
</html>
